import React, { ChangeEvent } from 'react';
import { observer } from 'mobx-react-lite';
import balanceStore from '@/store/balance';

const BanlanceForm = observer(() => {
    function handleChange(event: ChangeEvent<HTMLInputElement>) {
        let { value } = event.target;
        if (value) {
            if (/^\d*?\.?\d{0,2}?$/gi.test(value)) {
                if (/^0+[1-9]+/.test(value)) {
                    value = value.replace(/^0+/, '');
                }
                if (/^0{2}\./.test(value)) {
                    value = value.replace(/^0+/, '0');
                }
                value = value.replace(/^\./gi, '0.');
                if (parseFloat(value) > 200) {
                    value = '200.00';
                }
            }
        }
        balanceStore.setApplyNum(value);
    }

    return (
        <form className='broke-form'>
            <p>请输入提现金额（元）</p>
            <p>
                ¥
                <input
                    type='text'
                    value={balanceStore.applyNum}
                    placeholder='0.00'
                    onChange={handleChange}
                    maxLength={5}
                />
            </p>
        </form>
    );
});
export default BanlanceForm;
